<template>
	<view class="listtop">
		<view class="headerIger" @click="homePageInformation">
			<image class="headImg" src="../static/he.png"></image>
			<view class="headerRight">
				<view>昵称昵称昵称</view>
				<view class="id">ID:16564665</view>
			</view>
		</view>
		<view class="gh-right" @click="onlineAudience">
			<view class="gh-img" v-for="item in 3">
				<image class="guanzhu" src="../static/he.png"></image>
			</view>
			<view class="conTxt">
				99
			</view>
			<view class="close_jiu">
				<image class="closeA" src="../static/closeA.png"></image>
			</view>
		</view>
		<!-- 分享-->
		<uni-popup ref="recommend"  type="bottom" background-color="#fff" border-radius="10px 10px 0 0" :show="true" @close="closePopup">
			<view class="helpMain">
				<view class="helpMainTit">
					<view>在线观众(200)</view>
				</view>
				<view class="shareBtn">
					<scroll-view class="scroll-view" scroll-y="true">
						<view class="conList">
							<view class="conListimg">
								<image src="../static/he.png"></image>
							</view>
							<view class="name">昵称昵称昵称昵称</view>
							<image class="xinbie" src="../static/sk-e.png"></image>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"listTop",
		data() {
			return {
				
			};
		},
		methods:{
			onlineAudience(){
				this.$refs.recommend.open('bottom')
			},
			closePopup() {//关闭弹窗
				this.$refs.recommend.close()
			},
			homePageInformation(){
				uni.navigateTo({
					url:"/pages/home-btn/pages/homePageInformation/homePageInformation"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.listtop{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	.headerIger{
		display: flex;
		align-items: center;
		background-color: #666666;
		border-radius: 25px;
		margin-left: 35rpx;
		.headerRight{
			margin-left: 10rpx;
			padding-right: 25rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			.id{
				margin-top: 6rpx;
			}
		}
	}
}
.closeA{
	width: 30rpx;
	height: 31rpx;
}
.headImg{
	width: 79rpx;
	height: 79rpx;
	border-radius: 50%;
}
.guanzhu{
	width: 59rpx;
	height: 59rpx;
	border-radius: 50%;
}
.gh-right{
	display: flex;
	align-items: center;
	.gh-img{
		margin-right: 6rpx;
	}
	.conTxt{
		width: 38rpx;
		height: 38rpx;
		background-color: #666666;
		border-radius: 50%;
		text-align: center;
		margin: 0 15rpx;
	}
	.close_jiu{
		margin-right: 15rpx;
	}
}
.helpMain{
	width: 100%;
	font-weight: 400;
	font-size: 21rpx;
	color: #999999;
	.helpMainTit{
		width: 100%;
		color: #333333;
		height: 98rpx;
		line-height: 98rpx;
		font-weight: bold;
		font-size: 38rpx;
		text-align: center;
	}
	.shareBtn{
		width: 100%;
		height: 500rpx;
		.scroll-view{
			width: 90%;
			height: 97%;
			margin: 0 auto;
			margin-top: 10rpx;
			.conList{
				display: flex;
				align-items: center;
				margin-top: 15rpx;
				.conListimg{
					image{
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
					}
				}
				.name{
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					margin-left: 10rpx;
				}
				.xinbie{
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	
}
</style>

